<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menuItemNormal{
            background-color: gold;
            color: black;
            font-size: 14px;
            font-weight: normal;
            width: 100px;
        }

        .menuItemClicked{
            background-color: red;
            color: white;
            font-size: 14px;
            font-weight: bold;
            width: 100px;
        }

    </style>
</head>

<body>
<div>
<ul>
  <li><a href="#" onclick="switchPage('page1.html'); return false;" id="link1">链接1</a></li>
  <li><a href="#" onclick="switchPage('page2.html'); return false;" id="link2">链接2</a></li>
</ul>

    <ul id ='menus'>
        <li onclick="switchPage('page1.html')" >菜单-1</li>
        <li onclick="switchPage('page2.html')" >菜单-2</li>
        <li onclick="switchPage('page2.html')" >菜单-3</li>
    </ul>
</div>
<div>
    1.<button onclick="execute()">执行</button>
</div>
<hr style="border-top: 1px solid red;">

<iframe name="myFrame" src="page1.html"></iframe>



<script>

    function buildMenu(){
        const menu = {
            selectedIndex:1,
            menuItems:[
                {
                    id:1,
                    name:"菜单-1",
                    url:"page1.html"
                },
                {
                    id:2,
                    name:"菜单-2",
                    url:"page2.html"
                },
                {
                    id:3,
                    name:"菜单-3",
                    url:"page3.html"
                }

            ]
        }
        return menu;
    }

    function createMenuItems(){
        console.log("createMenuItems()");


        function menuItemOnClick(event){
            const url = event.target.getAttribute('data-my-custom-url');
            switchPage(url);
        }

        // 切换界面
        function switchPage(url){
            console.log("menuItemOnClick() url:",url);
            // 调用iframe的url
            window.frames['myFrame'].location.href = url;
        }
        const menu = buildMenu();
        const menuItems = menu.menuItems;
        const selectedIndex = menu.selectedIndex;

        // html中的元素
        const menuObject = document.getElementById('menus');

        menuObject.setAttribute("menu",menu);

        for (let i = 0; i < menuItems.length; i++) {
            const menuItem = menuItems[i];
            // 创建对象
            const li = document.createElement('li');
            if(selectedIndex == i){
                li.setAttribute("class","menuItemClicked");
            }else{
                li.setAttribute("class","menuItemNormal");
            }

            li.setAttribute("data-menuItemId",menuItem.id);
            li.setAttribute("class","itemDefault");
            // 把数据绑定上去
            li.setAttribute("data-my-custom-url",menuItem.url);
            li.innerText = menuItem.name;
            li.addEventListener("click", menuItemOnClick);
            // 添加元素
            menuObject.appendChild(li);
        }
    }


  function pageLoad(){
      console.log("pageLoad()");
      window.onload = function (){
          console.log("onload()");
          // addListeners();
          createMenuItems();
      }
  }

  // 执行代码调用
  pageLoad();



  // function addListeners(){
  //     // 为菜单项添加事件监听器
  //     const menuItems = document.getElementById('menus').getElementsByTagName('li');
  //     for (let i = 0; i < menuItems.length; i++) {
  //         const item = menuItems[i];
  //         item.setAttribute("class","itemDefault");
  //         // item.onmouseover = menuItemOnMouseOver;
  //         // item.onmouseout = menuItemOnMouseOut;
  //         // item.addEventListener("mouseover", menuItemOnMouseOver);
  //         // item.addEventListener("mouseout", menuItemOnMouseOut);
  //     }
  // }

  function switchPage(pageUrl) {
      console.log("switchPage() pageUrl:",pageUrl);
      // 一般
      // window.frames['myFrame'].src = pageUrl;

      // 更改iframe的location.href不会导致整个页面的重新加载，而只会更新iframe的URL。这通常更高效，并且可以避免不必要的页面闪烁或重新布局
      // 这种写法更好点
    window.frames['myFrame'].location.href = pageUrl;
  }
</script>
</body>
</html>
